import React from 'react';
import ReactDOM from 'react-dom';
import BraftEditor from '../src/index';
// import BraftEditor from '../dist/index';
import '../dist/index.css';

import 'braft-extensions/dist/emoticon.css';
import 'braft-extensions/dist/color-picker.css';
import 'braft-extensions/dist/table.css';
import 'braft-extensions/dist/code-highlighter.css';

// 假设你需要使用这些扩展
// import Emoticon from 'braft-extensions/dist/emoticon';
// import ColorPicker from 'braft-extensions/dist/color-picker';
// import Table from 'braft-extensions/dist/table';
// import CodeHighlighter from 'braft-extensions/dist/code-highlighter';

class App extends React.Component {
  constructor(props) {
    super(props);
    const editorState = BraftEditor.createEditorState('')

    this.state = {
      readOnly: false,
      editorState, // 使用 null 或初始内容
    };
    console.log('type: ', typeof editorState)
  }

  handleChange = (editorState) => {
    console.log('change');
    this.setState({ editorState });
  };

  logHTML = () => {
    console.log(this.state.editorState.toHTML());
  };

  logRAW = () => {
    console.log(this.state.editorState.toRAW());
  };

  render() {
    const { readOnly, editorState } = this.state;

    console.log('type render: ', typeof editorState)
    const isPass=  typeof editorState === 'object'

    return (
      <div>
        <div className="demo" id="demo">
          {
            isPass &&
          (<BraftEditor
            value={editorState} // 设置编辑器的初始值
            onChange={this.handleChange} // 设置编辑器状态变化时的回调函数
            readOnly={readOnly} // 设置编辑器是否只读
            // 其他属性根据需要设置
          />)
          }
        </div>
        {/* 按钮用于触发日志输出 */}
        <button onClick={this.logHTML}>Log HTML</button>
        <button onClick={this.logRAW}>Log RAW</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('#root'));
